<%-- 
    Document   : homeAdmin
    Created on : 14-12-2014, 0:05:10
    Author     : Rodrigo
--%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Epraxis - Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minumum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <style type="text/css">
            .marcarUsuario td {
                background-color: #d9edf7 !important;
            }
        </style>
    </head>
    <body class="body">
        <c:import url="/app/commons/Menu.view"/>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Lista de usuarios</h3>
                    <br>
                    <button type="button" onclick="ingresarNuevoUsuario()" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> Ingresar nuevo usuario</button>
                    <br><br>
                    <div class="table-responsive bg-white">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Opciones</th>
                                    <th>Nombre de usuario</th>
                                    <th>Tipo de usuario</th>
                                    <th>Fecha de registro</th>
                                    <th>Activo</th>
                                    <th># cursos asignados</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach var="u" items="${listaUsuario}">
                                    <tr class="${u.id == usuarioSesion.id ? 'marcarUsuario' : ''}">
                                        <td class="text-center">
                                            <a href="#" data-toggle="tooltip" onclick="editarUsuario('${u.id}')" title="Editar usuario"><i class="glyphicon glyphicon-pencil color-steelblue"></i></a>
                                            <a href="#" data-toggle="tooltip" title="Eliminar usuario"><i class="glyphicon glyphicon-remove color-red"></i></a>
                                        </td>
                                        <td>${u.usuario}</td>
                                        <td>${u.getTipoUsuario().nombre}</td>
                                        <td>
                                            <fmt:formatDate var="fechaRegistro" value="${u.fechaRegistro}" pattern="dd-MMM-yyyy HH:mm:ss"/>
                                            ${fechaRegistro}
                                        </td>
                                        <td>${u.isActivoText()}</td>
                                        <td>${mapaCantidadCursosAsignados.get(u)}</td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalUsuario">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Administración de usuarios</h4>
                    </div>
                    <div class="modal-body" id="body-modal-editar">
                        <iframe id="iframeUsuario" src="" class="no-border"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/epraxis.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('a[data-toggle=tooltip]').tooltip();

                $('#modalUsuario').on('shown.bs.modal', function(e) {
                    var iframe = document.getElementById('iframeUsuario');
                    resizeIframe(iframe);
                });

                $('#iframeUsuario').load(function() {
                    $('#modalUsuario').modal('show');
                });
            });

            function ingresarNuevoUsuario() {
                var url = '${contextPath}/app/admin/usuario/MantenedorUsuarioDisplay.view?modo=INSERT';
                $('#iframeUsuario').attr('src', url);
            }

            function editarUsuario(id) {
                var url = '${contextPath}/app/admin/usuario/MantenedorUsuarioDisplay.view?modo=EDIT&id=' + id;
                $('#iframeUsuario').attr('src', url);
            }

            function cerrarModalUsuario() {
                $('#modalUsuario').modal('hide');
            }
        </script>
    </body>
</html>